<template>
    <li class="icon-svg__item">
        <div class="icon-svg__item-body" @click="handleClick">
            <el-button>
                <icon-svg :name="name"></icon-svg>
            </el-button>
            <div class="icon-svg__item-name"><slot>{{name}}</slot></div>
        </div>
    </li>
</template>

<script lang="ts">
import { Component, Vue, Prop, Emit } from "vue-property-decorator";

@Component
export default class IconItem extends Vue {
    @Prop({
        type: String,
        default: ""
    })
    readonly name!: string;

    @Emit("item-click")
    handleClick() {
        return this.name;
    }
}
</script>
